<template>
    <div class="songdetailsbox">
        <!-- 歌曲详情页 -->
        <loading class="songxs" v-show="!songxs"></loading>
        <div class="songxs" v-show="songxs">
            <div class="songbg">
                <div class="bigzhe">
                    <div class="zhe"></div>
                    <img v-lazy="img" alt="">
                </div>
            </div>
            <div class="mysong">
                <div class='agoback' @click="fanhui">‹</div>
                <!-- 顶部的语言模式切换 -->
                <div @click="zyqh" class="qh">{{model[zy]}}</div>
                <!-- 头部 -->
                <div class="topname">
                    <div class="toptitle">
                        {{songname}}
                    </div>
                    <div class="toppeople">
                        {{songpeople}}
                    </div>
                </div>

                <xqcontent 
                v-bind:tupian="img" 

                v-bind:songgc="nowgc"

                ></xqcontent>


                <div class="songbotton">
                    <ul class="bttop">
                        <li @click="icongai=!icongai">
                            <svg class="icon" aria-hidden="true">
                                <use :xlink:href="icongai===true?'#icon-shoucang':'#icon-yishoucang'"></use>
                            </svg>
                        </li>
                        <li @click="xzgq">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiazai"></use>
                            </svg>
                        </li>
                        <li @click="gopl">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiaoxi"></use>
                            </svg>
                        </li>
                        <li @click="fxgq">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fabu"></use>
                            </svg>
                        </li>
                    </ul>
                    <div class="btjdt">
                        <div class="bar">
                            <div class="lefttime">{{xianzai}}</div>
                            <div class="huakuai" 
                            @touchmove="move"
                            @touchend="end"
                            ref="hezi">
                                <div class="hua" :style="`left:${x}px;`" @touchstart="kaishi"></div>
                                <div class="chang" :style="`width:${x}px;`" ></div>
                            </div>
                            <div class="righttime">{{zongde}}</div>

                        </div>
                    </div>
                    <ul class ="btchange">
                        <li @click="changemoshi">
                            <svg class="icon" aria-hidden="true">
                                <use :xlink:href="changebf[$store.state.listmoshi]"></use>
                            </svg>
                        </li>
                        <li @click="shangyishou">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shangyishou"></use>
                            </svg>
                        </li>
                        <li class="zhong">
                            <svg class="icon" aria-hidden="true" @click="st">
                                <use :xlink:href="this.$store.state.nowstate==true?'#icon-zanting':'#icon-bofang1'"></use>
                            </svg>
                        </li>
                        <li @click="xiayishou">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiayishou"></use>
                            </svg>
                        </li>
                        <li @click="gaib">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-24gl-playlistHeart4"></use>
                            </svg>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="songmask" v-show="xsgd">
                <div style="position: relative;">
                    <span class="bigtuichu" @click="gaib">×</span>
                    <div class="anniu">
                        <div :class="{a1:changeactive===true}" @click="changeactive=true"></div>
                        <div :class="{a1:changeactive===false}" @click="changeactive=false"></div>
                    </div>
                </div>
                <div class="sobig" :style="`transform: translateX(${changeactive==true?0:-300}px);`">
                    <div class="gdbox debox">
                        <h5>当前歌单</h5>
                        <ul>
                            <li v-for="(item,index) in $store.state.list1" :key="item.id"
                            >
                                <p 
                                :class="{'gdactive':$store.state.listwhich===index&&$store.state.listwhat==0}"
                                @click="gbdq(0,index)"
                                >{{item.name}}</p>
                                <span class="lbdw" @click="dqdelet(index)">×</span>
                            </li>
                        </ul>
                    </div>
                    <div class="hisbox debox">
                        <h5>播放历史</h5>
                        <ul>
                            <li v-for="(item,index) in $store.state.list2" :key="item.id">
                                <p 
                                :class="{'gdactive':$store.state.listwhich===index&&$store.state.listwhat==1}"
                                @click="gbdq(1,index)"
                                >{{item.name}}</p>
                                <span class="lbdw" @click="dqdelet(index)">×</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 分享 -->
            <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
                />
            <!-- /check/music?id=33894312 查询歌曲是否可用 -->
        </div>
    </div>
</template>
<script>
import xqcontent from "../small/xqcontent.vue"
import xqbotton from "../small/xqbotton.vue"
import loading from "../small/loading.vue"
import { Toast } from 'vant';
export default {
    name:"songdetails",
    watch:{
        "$store.state.nowid":{
            handler(){
                this.getdata()
            },
            immediate: true,
        },
        "$store.state.nowtime":{
            handler(value){
                this.chuli(value)
                this.jtsj()
            },
        },
        "$store.state.alltime":{
            handler(){
                this.zongde = this.jisuan(this.$store.state.alltime);
            },
        },
    },
    components:{
        xqcontent,
        xqbotton,
        loading
    },
    data(){
        return {
            // id:'',
            gc:'',
            songpeople:'',
            songname:'',
            img:'',
            // 有翻译的歌词
            fygc:[],
            // 没有翻译的歌词
            nogc:[],
            // 双语歌词
            allgc:[],
            // 当前的歌词
            nowgc:[],
            // 判断显示
            songxs:false,
            // 左右的时间
            xianzai:"00:00",
            zongde:"00:00",
            // 显示歌单
            xsgd:false,
            // 歌单的显示
            changeactive:true,
            // 改变中英
            zy:3,
            // 歌词的可能性
            model:['双语',"外语","中文"],

            pdnum:0,
            
            // 底部的icon
            // 播放暂停的icon
            icongai:true,
            // 进度条的原点左边距以及白底的长
            x:0,
            // 按下的位置
            anxia:0,
            // 起来的位置
            qilai:0,
            // 进度条最大的宽度
            zuida:0,
            // 
            dian:false,
            yidong:0,

            // 第几首
            dijishou:0,
            // 模式
            mos:0,

            // 分享界面的显示
            showShare:false,
            options: [
                { name: '复制链接', icon: 'link' },
            ],

            // 模式的icon
            changebf:['#icon-xunhuanbofang','#icon-danquxunhuan','#icon-suijibofang']
        }
    },
    created(){
        document.oncontextmenu = ()=> {return false}
        this.zongde = this.jisuan(this.$store.state.alltime);
        if(this.$store.state.nowid == 0){
            console.log("请选择歌曲")
            this.$router.push({path:'/index'})
        }
    },
    methods:{
        // 获取数据
        getdata(){
            axios.get(`https://apis.netstart.cn/music/lyric?id=${this.$store.state.nowid}`).then(
                res=>{
                    this.zy = 3
                    this.gc = res.data.lrc.lyric
                    this.fy = res.data.tlyric.lyric
                    this.gccl()
                    this.pdnum += 1
                    if(this.pdnum == 2){
                        this.songxs = true
                    }
                },
                err=>{
                    console.log(err)
                }
            ).then(
                axios.get(`https://apis.netstart.cn/music/song/detail?ids=${this.$store.state.nowid}`).then(
                    res=>{
                        // console.log(res)
                        let data = res.data.songs[0]
                        var ren = ''
                        for(let i = 0;i<data.ar.length;i++){
                            if(i ==0){
                                ren += data.ar[i].name
                            }else{
                                ren += "、"+data.ar[i].name
                            }
                        }
                        this.songpeople = ren
                        this.img = data.al.picUrl
                        this.songname = data.name
                        this.pdnum += 1
                        if(this.pdnum == 2){
                            this.songxs = true
                        }
                        if(this.$store.state.nowstate == false){
                            this.$store.commit("changesongstate",true)
                        }
                    },
                    err=>{
                        console.log(err)
                    }
                )
            ) 
        },
        // 点击改变当前语言
        zyqh(){
            if(this.fygc[0] != undefined){
                this.zy += 1
                if(this.zy == 0){
                    this.nowgc = this.allgc
                }else if(this.zy == 1){
                    this.nowgc = this.nogc
                }else if (this.zy == 2){
                    this.nowgc = this.fygc
                }else{
                    this.zy = 0
                    this.nowgc = this.allgc
                }
            }else{
                // this.zy = 2
                // this.nowgc = this.nogc
            }
        },
        // 处理歌词（中外双）
        gccl(){
            // 初始化
            this.allgc = []
            this.nogc = []
            this.fygc = []
            // 处理歌词
            let str = this.gc
            let arr = str.split(/\n/);
            arr.pop();
            let regE = /\[(\d+):(\d+\.\d+)\](.*)/;
            for (let i = 0; i < arr.length; i++) {
                if (regE.test(arr[i])) {
                    let obj = {};
                    let m = RegExp.$1 - 0 ;
                    let s = RegExp.$2 - 0;
                    let gc = RegExp.$3;
                    let id = Symbol(); 
                    obj.time = m * 60 + s;
                    if(gc === ""){
                        gc = "&nbsp;"
                    }
                    obj.gc = gc;
                    obj.id = id;
                    this.nogc.push(obj);
                }
            }
            // 如果有翻译
            if(this.fy != ''){
                let str2 = this.fy
                let arr2 = str2.split(/\n/);
                arr2.pop()
                for (let i = 0; i < arr2.length; i++) {
                    if (regE.test(arr2[i])) {
                        let obj = {};
                        let m = RegExp.$1 - 0 ;
                        let s = RegExp.$2 - 0;
                        let gc = RegExp.$3;
                        let id = Symbol(); 
                        obj.time = m * 60 + s;
                        if(gc === " "){
                            gc = "&nbsp;"
                        }
                        obj.gc = gc;
                        obj.id = id;
                        this.fygc.push(obj);
                    }
                } 
                // 总和
                if(this.fygc.length > this.nogc.length){
                    for(let i = 0;i<this.fygc.length;i++){
                        for(let j = 0;j<this.nogc.length;j++){
                            if(this.fygc[i].time == this.nogc[j].time){
                                let obj = {}
                                obj.time = this.fygc[i].time
                                obj.gc = this.nogc[j].gc + '<br>' + this.fygc[i].gc
                                obj.id = Symbol(); 
                                this.allgc.push(obj)
                            }
                        }
                    }
                }else{
                    for(let i = 0;i<this.nogc.length;i++){
                        for(let j = 0;j<this.fygc.length;j++){
                            if(this.nogc[i].time == this.fygc[j].time){
                                let obj = {}
                                obj.time = this.nogc[i].time
                                obj.gc = this.nogc[i].gc + '<br>' + this.fygc[j].gc
                                obj.id = Symbol(); 
                                this.allgc.push(obj)
                            }
                        }
                    }
                }
                this.zyqh()
            }else{
                this.zy = 2
                this.nowgc = this.nogc
            }
        },
        // 计算时间出分秒
        jisuan(shi){
            // 获取分钟 、秒钟信息
            // console.log(shi)
            let m = Math.floor(shi / 60);
            let s = Math.floor(shi % 60);
            // 补零
            m = m < 10 ? "0"+m : m;
            s = s < 10 ? "0"+s : s;
            // 返回指定格式的时间
            return `${m}:${s}`
        },
        // 处理底下的进度条
        chuli(value){
            // console.log(value)
            this.xianzai = this.jisuan(value);
            this.x = (value / this.$store.state.alltime) * 230 ;
        },
        // 改变模式
        changemoshi(){
            let mos = this.$store.state.listmoshi
            mos += 1
            if(mos >= 3){
                mos = 0
            }
            this.$store.commit("changelistmoshi",mos)
            let ranarr = []
            // let abcd = []
            let ng = 0
            // 当前歌单
            if(this.$store.state.listwhat == 0){
                let shuzi = this.$store.state.list1[this.$store.state.listwhich]
                // 如果是随机模式的话
                if(this.$store.state.listmoshi == 2){
                    ranarr = this.randomSort(this.$store.state.list1)
                    this.$store.commit("changelist1",ranarr)
                    for(let i = 0;i<ranarr.length;i++){
                        if(shuzi.id === ranarr[i].id){
                            ng = i
                        }
                    }
                    this.$store.commit("changelistwhich",ng)
                }
            }
            // 历史记录
            else{
                let shuzi = this.$store.state.list2[this.$store.state.listwhich]
                // 如果是随机模式的话
                if(this.$store.state.listmoshi == 2){
                    ranarr = this.randomSort(this.$store.state.list2)
                    this.$store.commit("changelist2",ranarr)
                    // 看是哪首歌
                    for(let i = 0;i<ranarr.length;i++){
                        if(shuzi.id === ranarr[i].id){
                            ng = i
                        }
                    }
                    this.$store.commit("changelistwhich",ng)
                }
            }
        },
        // 对数组进行重新排序
        randomSort(arr) {
            return arr && arr.sort((a, b) => Math.random() - 0.5);
        },
        // 改变播放状态
        st(){
            this.$store.commit("changesongstate",!this.$store.state.nowstate)
        },
        // 开始改变进度条
        kaishi(event){
            this.anxia = event.touches[0].pageX;
            this.dian = true;
            this.$store.commit("changesongstate",false)
            this.$store.commit("changechange",true)
        },
        // 开始移动进度条
        move(event){
            if(this.dian){
                this.zuida = this.$refs.hezi.offsetWidth;
                // console.log(this.zuida)
                // 右调
                if(event.touches[0].pageX - this.anxia > 0){
                    this.x = event.touches[0].pageX - this.$refs.hezi.offsetLeft;
                    // 最左
                    if(this.x < 0 ){
                        this.x = 0;
                    }
                    // 最右
                    if(this.x > this.zuida ){
                        this.x = this.zuida ;
                    }
                    this.yidong = (this.x / this.zuida) * this.$store.state.alltime;
                }
                // 左调
                else{
                    this.x = event.touches[0].pageX - this.$refs.hezi.offsetLeft
                    // 最左
                    if(this.x < 0 ){
                        this.x = 0;
                    }
                    // 最右
                    if(this.x > this.zuida ){
                        this.x = this.zuida ;
                    }
                    this.yidong = (this.x / this.zuida) * this.$store.state.alltime;
                }
                this.$store.commit("changenowtime",this.yidong)
                // this.$store.commit("changesongstate",false)
            }
        },
        // 移动进度条结束
        end(){
            // console.log("起来")
            this.dian = false;
            this.qilai = this.x;
            this.yidong = 0
            this.$store.commit("changesongstate",true)
            this.$store.commit("changechange",false)
        },
        // 点击上一首
        shangyishou(){
            let thenum = this.$store.state.listwhich
            thenum -= 1
            if(this.$store.state.listwhat == 0){
                if(thenum < 0){
                    thenum = this.$store.state.list1.length-1
                }
            }else{
                if(thenum < 0){
                    thenum = this.$store.state.list2.length-1
                }
            }
            this.$store.commit("changelistwhich",thenum)
            this.changid(thenum)
        },
        // 点击下一首
        xiayishou(){
            let thenum = this.$store.state.listwhich
            thenum += 1
            if(this.$store.state.listwhat == 0){
                if(thenum >= this.$store.state.list1.length){
                    thenum = 0
                }
            }else{
                if(thenum >= this.$store.state.list2.length){
                    thenum = 0
                }
            }
            this.$store.commit("changelistwhich",thenum)
            this.changid(thenum)
        },
        // 上下首切换获取id
        changid(thenum){
            let id = 0
            if (this.$store.state.listwhat == 0) {
                id = this.$store.state.list1[thenum].id
            } else {
                id = this.$store.state.list2[thenum].id
            }
            this.$store.commit("changesongid",id)
            // this.$store.commit("changesongstate",true)
        },
        // 关闭或显示歌单
        gaib(){
            this.xsgd = !this.xsgd
        },
        // 改变当前歌单以及歌曲
        gbdq(num,index){
            if(num == 0){
                this.$store.commit("changelistwhat",0)
                this.$store.commit("changesongid",this.$store.state.list1[index].id)
                this.$store.commit("pushlist2",{id:this.$store.state.list1[index].id,name:this.$store.state.list1[index].name})
            }else{
                this.$store.commit("changelistwhat",1)
                this.$store.commit("changesongid",this.$store.state.list2[index].id)
            }
            this.$store.commit("changelistwhich",index)
        },
        // 删除歌单中的歌曲
        dqdelet(index){
            let arr = []
            // 是当前歌单的话
            if(this.$store.state.listwhat == 0){
                for(let i = 0 ;i<this.$store.state.list1.length;i++){
                    if(i == index){
                        if(i = this.$store.state.listwhich){
                            this.$store.commit("changesongid",this.$store.state.list1[i+1].id)
                        }
                    }else{
                        arr.push(this.$store.state.list1[i])
                    }
                }
                this.$store.commit("changelist1",arr)
            }else{
                for(let i = 0 ;i<this.$store.state.list2.length;i++){
                    if(i == index){
                        this.$store.commit("changesongid",this.$store.state.list2[i+1].id)
                    }else{
                        arr.push(this.$store.state.list2[i])
                    }
                }
                this.$store.commit("changelist1",arr)
            }
        },
        fanhui(){
            this.$router.go(-1)
        },
        // 监听时间变化
        jtsj(){
            if(this.$store.state.alltime <= this.$store.state.nowtime + 1.6){
                if(this.$store.state.listmoshi == 0 && this.$store.state.change == false){
                    this.xiayishou()
                }
            }
        },
        // 去评论页
        gopl(){
            this.$router.push({path:"/comment",query:{id:this.$store.state.nowid}})
        },
        // 分享歌曲
        fxgq(){
            this.showShare = true
        },
        onSelect() {
            Toast("已复制到剪切板");
            this.fuzhi()
            this.showShare = false;
        },
        fuzhi(){
            let str = `分享${this.songpeople}的单曲《${this.songname}》: https://y.music.163.com/m/song?id=${this.$store.state.nowid} (来自@泠泠音乐)`
            var input = document.createElement("input");   // js创建一个input输入框
            input.value = str;  // 将需要复制的文本赋值到创建的input输入框中
            document.body.appendChild(input);    // 将输入框暂时创建到实例里面
            input.select();   // 选中输入框中的内容
            document.execCommand("Copy");   // 执行复制操作
            document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
        },
        // 下载歌曲
        xzgq(){
            Toast("下载成功");
        },
    }
}
</script>
<style lang="less" scoped>
.qh{
    position: absolute;
    top: 1.5%;
    font-size: 14px;
    right: 5%;
    color: white;
    border: 1px solid white;
    padding: 5px;
    border-radius: 10px;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.songdetailsbox{
    // background-color: red;
    padding-top: 1px ;
    height:100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.songbg{
    width: 200%;
    height: 200%;
    position: absolute;
    top: -5%;
    left: -50%;
    z-index: 1;
    transform: scale(01);
    transform-origin: center center;
    background-size: cover;
    filter: blur(20px);
}
.songxs{
    width: 100%;
    height: 100%;
}
.mysong{
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height:100%;
}
.bigzhe{
    position: relative;
    width: 100%;
    height:100%;
    img{
        width: 100%;
    }
}
.zhe{
    position: absolute;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.411);
}
.songmask{
    /* position: absolute; */
    /* top: 32%; */
    /* bottom: 0px; */
    /* right: 0px; */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* background: black; */
    z-index: 3;
    overflow: hidden;
    padding-top: 45%;
    position: relative;
    .sobig{
        // width: 200%;
        height: 100%;
        // background-color: yellow;
        display: flex;
        padding-top: 25%;
        width: 600px;
        margin-left: 35px;
        // transform: translateX(-265px);
        .debox{
            width: 50%;
            height: 70%;
            // border: 1px solid #000;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            margin-right: 20px;
            overflow-y:scroll ;
            &::-webkit-scrollbar { width: 0 !important }
        }
    }
}
h5{
    color: #666;
    padding-left: 30px;
    font-size: 16px;
    margin-bottom: 15px;
}
ul{
    width: 80%;
    margin: 0 auto;
    padding-top:1px;
    li{
        position: relative;
        margin-bottom: 15px;
        p{
            color:#898989; 
            margin: 5px;
            width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        span{
            position: absolute;
            top: 0%;
            right: 5%;
            font-size: 20px;
            z-index:10;
        }
    }
}
.bigtuichu{
    position: absolute;
    top: 10%;
    left: 83%;
    color: white;
    display: inline-block;
    font-size: 30px;
    border-radius: 50%;
    background-color: #ffffff42;
    width: 30px;
    margin-top: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    z-index: 10;
}
.gdactive{
    color: #4b4bdb;
    font-weight: 600;
}
.anniu{
    position: absolute;
    top: 55px;
    left:145px;
    display:flex;
    z-index: 10;
    // width: 30px;
    // height:20px;
    // background-color: red;
    div{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #ffffff96;
        margin: 10px;
    }
    .a1{
        background-color: #ffffff;
    }
}
.agoback{
    position:fixed;
    top: 0px;
    left: 0px;
    font-size: 2rem;
    color: #ddd;
    // background-color: #eeeeee66;
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    z-index: 1000;
}
.ascro{
    color:#a3a3a3 !important;
}
.topname{
    height: 50px;
    box-sizing: border-box;
    padding-top: 5px;
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}
.toptitle{
    color: white;
    font-size: 1.2rem;
    text-align: center;
}
.toppeople{
    text-align: center;
    font-size: 0.8rem;
    color: #eee;
}
.songbotton{
    width: 100%;
    height:25%;
    // background-color: blue;
}
svg{
    color: white;
}
.bttop{
    width: 75%;
    margin: 0 auto;
    display:flex;
    justify-content: space-between;
    li{
        svg{
            font-size: 2rem;
            color:rgba(255, 255, 255, 0.7);
        }
    }
}
.btjdt{
    width: 90%;
    margin: 12px auto 0px;
    font-size: 1rem;
    .bar{
        width: 100%;
        display:flex;
        justify-content: space-between;
    }
}
.lefttime{
    color:white;
    font-size: 0.8rem;    margin-top: 2px;
}
.righttime{
    font-size: 0.8rem;    margin-top: 2px;
    color: white;
}
.huakuai{
    width: 70%;
    margin-top: 7px;
    height: 3px;
    background-color: #ffffff6e;
    position: relative;
    border-radius: 10px;
    .hua{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        transform: translate(-50%,-50%);
        background-color: #4e83f0;
        z-index: 10;
    }
    .chang{
        position: absolute;
        top: 0px;
        left:0px;
        width: 50%;
        height:3px;
        background-color: white;
    }
}
.btchange{
    width: 85%;
    margin: 15px auto;
    display: flex;
    justify-content: space-between;
    li{
        svg{
            font-size: 1.8rem;
            margin-top:20px;
            color:rgba(255, 255, 255, 0.7);
        }
    }
    .zhong{
        svg{
            margin-top:0px;
            font-size: 4rem;
            color:white;
        }
    }
}
</style>